<template>
  <div class="goods-list">
		<!-- 使用router-link创建a标签来定义导航链接 -->
    <!-- <router-link class="good-item" v-for="item in goodslist" :key="item.id" 
		:to="'/home/goodsinfo/'+item.id" tag="div">
			<img :src="item.img_url" alt="">
			<h1>{{ item.title }}</h1>
			<div class="info">
				<p class="price">
					<span class="now">￥{{ item.sell_price }}</span>
					<span class="old">￥{{ item.market_price }}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩{{ item.stock_quantity }}件</span>
				</p>
			</div>
		</router-link> -->
		<!-- 编程式导航：借助router的实例方法，通过编写代码来实现 -->
		<div class="good-item" v-for="item in goodslist" :key="item.id" 
		@click="goDetail(item.id)">
			<img :src="item.img_url" alt="">
			<h1>{{ item.title }}</h1>
			<div class="info">
				<p class="price">
					<span class="now">￥{{ item.sell_price }}</span>
					<span class="old">￥{{ item.market_price }}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩{{ item.stock_quantity }}件</span>
				</p>
			</div>
		</div>


		<mt-button type='danger' size='large' @click='getMore'>加载更多</mt-button>
  </div>
</template>

<script>
export default {
	data(){
		return {
			pageindex: 1,  //商品列表的页码值
			goodslist: []
		}
	},
	created(){
		this.getGoodsList();
	},
	methods:{
		getGoodsList(){  //获取商品列表
			this.$axios.get('/api/getgoods?pageindex='+this.pageindex)
			.then(response =>{ 
				// this.goodslist = response.data.message;
				this.goodslist = this.goodslist.concat(response.data.message);
			})
			.catch(err =>{
				console.log(err)
			})
		},
		getMore(){//点击加载更多
			this.pageindex++;
			this.getGoodsList();
		},
		goDetail(id){
			console.log(this)
			//方式一  字符串
			// this.$router.push('/home/goodsinfo/'+id)
			//方式二  对象
			// this.$router.push({ path: '/home/goodsinfo/'+id })
			// 方式三  命名的路由
			this.$router.push({ name: 'goodsinfo',params: { id }})
			//方式四  
			// this.$router.push({ path: '/home/goodsinfo/',query: { id }})
		}
	}
}
</script>

<style lang="scss" scoped>
	.goods-list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 7px;
		.good-item{
			width: 49%;
			border: 1px solid #ccc;
			box-shadow: 0 0 8px #ccc;
			margin: 4px 0;
			padding: 2px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			min-height: 293px;
			img{
				width: 100%;
			}
			h1{
				font-size: 14px;
			}
			.info{
				background-color: #eee;
				p{
					margin: 0;
					padding: 5px;
				}
				.price{
					.old{
						font-size: 12px;
						text-decoration: line-through;
						margin-left: 10px;
					}
					.now{
						font-size: 16px;
						color: red;
						font-weight: bold;
					}
				}
				.sell{
					font-size: 12px;
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
</style>